<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面头部设计</title>
    <link rel="stylesheet" href="CSS/head.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            if(localStorage.getItem('user')){
                var username=localStorage.getItem('user')
                $('#login').css('display','none')
                $('#menu>ul>li:last-child>a').html("欢迎："+username)
                $('#menu>ul>li:last-child').css('display','block')
            }
            $('#serchBox').click(function () {
                $('#serchBox').animate({ 'width': '200px' }, 1000)
            })
            $('#serchBox').blur(function () {
                $('#serchBox').animate({ 'width': '100px' }, 1000)
            })
            $(document).scroll(function () {
                if ($(document).scrollTop() >= 40) {
                    $('#nav').css({'position':'fixed','top':'0'})
                }else{
                    $('#nav').css({'position':'absolute','top':'40px'})
                }
            })
            $('#menu>ul>li>a').click(function(){
                $(this).attr('class','clk')
                $(this).siblings().attr('class','unclk')
            })
        })
    </script>
</head>

<body>
    <div id="nav">
        <div id="menu">
            <ul>
                <li class="selected"><a href="index.html" class="unclk">首页</a></li>
                <li><a href="aim.html" class="unclk">目的地</a></li>
                <li><span class="unclk">旅游攻略<i></i></span>
                    <ul>
                        <li><a href="jingdian.html" class="unclk">景点攻略</a></li>
                        <li><a href="meishi.html" class="unclk">美食攻略</a></li>
                        <li><a href="line.html" class="unclk">个性路线</a></li>
                    </ul>
                </li>
                <li>
                    <input type="text" id="serchBox">
                    <a href="" class="unclk">搜索</a>
                </li>
                <li id="login">
                    <a href="login.html" class="unclk">登录</a>
                    | <a href="regist.html" class="unclk">注册</a>
                </li>
                <li><a href="userCenter.html">个人中心</a></li>
            </ul>
        </div>
</body>

</html>